import { definePage, ref, toRefs, reactive, onShow } from '../../vue-mini/index'
import { getCityAllListApi } from '../../utils/request'
definePage({
  setup(options) {
    const { cityNm } = options
    const state = reactive({
      searchText: '', //搜索文字
      searchTimer: '',
      searchHistyList: [],
      hotAddresList :[
        { id: 0, wgs84ll: '115.549482,34.823253', title: '曹县' },
        { id: 1, wgs84ll: '121.472644,31.231706', title: '上海' },
        { id: 2, wgs84ll: '116.405285,39.904989', title: '北京' },
        { id: 3, wgs84ll: '113.280637,23.125178', title: '广州' },
        { id: 4, wgs84ll: '104.065735,30.659462', title: '成都' },
        { id: 5, wgs84ll: '120.153576,30.287459', title: '杭州' },
        { id: 6, wgs84ll: '114.298572,30.584355', title: '武汉' },
        { id: 7, wgs84ll: '120.355173,36.082982', title: '青岛' },
        { id: 7, wgs84ll: '117.190182,39.125596', title: '天津' },
      ]
    })
    onShow(() => {
      // 读取缓存的历史记录
      state.searchHistyList = wx.getStorageSync('searchHistyList') || []
      if(cityNm)  hotActiceindex.value = state.hotAddresList.findIndex(e=>e.title==cityNm)
      getCityAllList()
    })
    const hotActiceindex = ref(0)  // 热门城市当前选中下标
    // 点击选择热门城市
    const handleHotsItem = (e) => {
      const { id, name } = e.target.dataset
      hotActiceindex.value = id
      // 选择城市增加历史记录
      if (!state.searchHistyList.includes(name)) {
        state.searchHistyList = [name, ...state.searchHistyList]
        wx.setStorageSync('searchHistyList', state.searchHistyList)
      }
      // 跳转到首页
      wx.navigateTo({
        url: '/pages/index/index?cityNm=' + name,
      })
    }
    // 城市列表
    const cityAllList = ref(null)
    // 获取所有的城市列表
    const getCityAllList = () => {
      getCityAllListApi().then((res) => {
        const { dtList } = res.data.result
        cityAllList.value = dtList
      })
    }
    const isSearchList = ref([]) //搜索到的数组
    const isSearchListShow = ref(false) //控制搜索列表显示隐藏
    // 输入事件
    const handleSearch = (e) => {
      const { value } = e.detail
      if (!value) {
        clearTimeout(state.searchTimer)
        return
      }
      // 增加延时判断
      if (state.searchTimer) clearTimeout(state.searchTimer)
      state.searchTimer = setTimeout(() => {
        for (var key in cityAllList.value) {
          const cityV = cityAllList.value[key].cityNm
          if (cityV.indexOf(value) != '-1') {
            isSearchListShow.value = true
            isSearchList.value.push(cityAllList.value[key])
          }
        }
        if (!isSearchList.value.length)
          wx.showToast({
            icon: 'none',
            title: '没有找到内容',
          })
      }, 1000)
    }
    // 取消按钮 还原页面
    const handleClear = () => {
      state.searchText = ''
      isSearchList.value = []
      isSearchListShow.value = false
    }
    const clearHistyList = () => {
      state.searchHistyList = []
      wx.setStorageSync('searchHistyList', [])
    }
    return {
      ...toRefs(state),
      hotActiceindex,
      isSearchList,
      isSearchListShow,
      clearHistyList,
      handleHotsItem,
      handleSearch,
      handleClear,
      handleClear,
    }
  },
})
